<template>
  <div class="nav-bar">
    <div class="left" @click="goback"><slot name="left">
        <img src="~assets/images/left.png" alt=""></slot></div>
    <div class="center"><slot></slot></div>
    <div class="right"><slot name="right"></slot></div>
  </div>
</template>
<script>
import {useRouter,useRoute} from 'vue-router'
export default {
    setup(){
        const route=useRoute()
        const router=useRouter()
        const goback=()=>{
            router.go(-1)
        }
        return{goback}
    }
}
</script>
<style lang="less" scoped>
.nav-bar{
    display: flex;
    background-color:#42b983;
    color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
    height: 45px;
    line-height: 45px;
    text-align: center;
     box-shadow: 0 2px 0 rgba(100,100,100,.1);
   .left,.right{
       float: left;
       width: 60px;
   }
   .left img{
       width: 28px;
       height: 28px;
       padding-top: 9px;
   }
   .center{
      
       flex: 1;
   }
}
</style>